<%- include fheader.ejs %>
<style>
    body {
        color: #333;
        font-size: 16px !important;
    }

    .ui-dialog-bd div {
        text-align: left;
    }

    .wrp {
        padding: 10px 0;
        position: relative;
    }

    .wrp ul {
        margin-bottom: 15px
    }

    .cardNo {
        color: #ff5c01;
        font-size: 20px;
        padding-right: 5px
    }

    .ui-list-info p.gray {
        color: #999
    }

    .statusShow {
        color: #1ea5f5;
        font-size: 12px;
        border: 1px solid #1ea5f5;
        border-radius: 20px;
        padding: 2px 5px;
    }

    .ui-btn, .ui-btn:focus, .ui-btn:not(.disabled):not(:disabled):active, .ui-btn.active {
        background-color: #1ea5f5;
        border-color: #1ea5f5;
        background-image: none;
        color: white;
    }

    .ui-btn:focus, .ui-btn:not(.disabled):not(:disabled):active, .ui-btn.active {
        background-color: #0b7bbd;
        border-color: #0b7bbd;
    }

    .ui-dialog .ui-btn-group button {
        background-color: inherit !important;
        color: #00a5e0;
        border-radius: inherit;
    }

    p {
        margin: 0 !important
    }
</style>
<link rel="stylesheet" href="/wx/css/sm.min.css">
<script src="/wx/js/sm.min.js"></script>

<section class="ui-container">
    <div id="topForm" style="background:#fff">
        <div class="ui-form-item ui-border-b">
            <label>
                电话
            </label>
            <input id="txtCellno" type="text" placeholder="请输入电话">
        </div>
        <div>
            <div class="ui-form-item ui-border-b">
                <label>开始时间</label>

                <div class="ui-select">
                    <input type="text" id="sdate" value="<%= sdate %>" style="padding-left: 0;height: 30px"/>

                </div>
            </div>
            <div class="ui-form-item ui-border-b">
                <label>结束时间</label>

                <div class="ui-select">
                    <input type="text" id="edate" value="<%= edate %>" style="padding-left: 0;height: 30px"/>

                </div>
            </div>
        </div>
        <div class="ui-btn-wrap" style="padding-bottom: 0">
            <button class="ui-btn-lg ui-btn-primary" type="button" id="btnQuery">查询</button>
        </div>
    </div>

    <div class="ui-scroller" style="margin-top:10px;overflow: hidden">
        <div class="wrp" id="cardHis">
        </div>
    </div>
</section>
<%- include navbar.ejs %>
<script type="tmpl/text" id="jstmpl">
{{for(var i in it){}}
     <ul class="ui-list ui-list-text">
         <li class="ui-border-t">
             <div class="ui-list-info">
             <h4><span class="cardNo">{{=it[i]['card_id']}}</span><span>保险卡号</span></h4>
             <p class="gray">{{=it[i]['createdate']}}</p>
             <p class="gray">用户电话: <span> {{=it[i]['cellno']}}</span></p>
             {{if(it[i]['insure_id']){}}
             <p class="gray">保单号: <span> {{=it[i]['insure_id']}}</span></p>
             <p class="gray">用户名: <span> {{=it[i]['bodyname']}}</span></p>
             {{}}}
             {{if(it[i]['pay_type']){}}
             <p class="gray">支付方式: <span> {{=PAY_MAP[it[i]['pay_type']]}}</span></p>
             {{}}}
             </div>
             <div class="ui-list-action statusShow">{{=STAT_MAP[it[i]['verifydone']]}}</div>
         </li>
         {{if(it[i]['verifydone']=='1' && it[i]['cstate']=='1' && ((new Date(it[i].invalidate.substr(0,10))).getTime()+15*24*60*60*1000 > (+new Date()))){}}
             {{if(it[i]['prod_type']!=2){}}
                 <li class="ui-border-t">
                     <div class="ui-flex ui-txt-info ui-flex-pack-end">
                         <button class="ui-btn changeCard" data-otn="{{='s_'+it[i]['out_trade_no']}}">更换保险</button></div>
                 </li>
             {{}}}
         {{}}}
     </ul>
{{}}}

</script>
<script>
    $("#sdate").calendar();
    $("#edate").calendar();

    var STAT_MAP = {
        0: '未验证',
        1: '已验证',
        2: '过期未验证',
        3: '线下退款',
        4: '换机退款'
    };
    var PAY_MAP = {1: '扫码支付', 2: '店员代付',3:'线下支付'};

    $(function () {
        var LIST_URL = '/rest/wx/getCardRecord';
        var accName = '<%= acc_name%>';
        var channelId = '<%= channel_id%>';
        var scroll = null;

        function loadData() {
            var p = {
                name: accName,
                channel_id: channelId,
                cellno: $('#txtCellno').val(),
                sdate: $('#sdate').val(),
                edate: $('#edate').val()
            };

            juq.showLoading();
            juq.fpost(LIST_URL, p, function (data) {
                juq.hideLoading();
                if (data.length <= 0) {
                    $('#cardHis').html('<div class="ui-tips ui-tips-info"> <i></i><span>暂时还没有记录</span> </div>');
                    return;
                }
                var html = $('#jstmpl').tmpl(data);
                $('#cardHis').html(html);
                scroll && scroll.refresh();
            });
        }

        $('#btnQuery').on('touchend', function () {
            loadData();
        });

        $('#cardHis').on('click', '.changeCard', function () {
            var $this = $(this);
            var dia = $.dialog({
                title: '',
                content: '确认要更换这个保险吗?',
                button: ["确认", "取消"]
            });

            dia.on("dialog:action", function (e) {
                if (e.index == 0) {
                    var otn = $this.data('otn').substr(2);
                    location.href = '/rest/svcWxPage/operorder?otno=' + otn;
                }
            });
        });

        $('.ui-scroller').css('height', $(window).height()-$('#topForm').height()-$('#navbar').height()-20);
        scroll = new fz.Scroll('.ui-scroller', {scrollY: true})
        loadData();

    });
</script>

<%- include ftailer.ejs %>
